<template>
  <div class="app-container">
    <ehead index="2"></ehead>
    <uploads type="音视频"></uploads>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          音视频二维码生成器，上传生成二维码
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          二维码还可展示图文、表格、文件等丰富内容，扫码即可查看
        </div>
        <el-row class="mt-10">
          <el-col :span="12">
            <div class="">
              <div class="m-2" style="font-size: 20px; font-weight: 600">扫一扫在线播放，可添加多个音视频</div>
              <div class="m-2">
                扫码就能播放，节省大量光盘成本费用，提升学习、工作效率播放无广告，不卡顿，视频无水印，保证观看体验。
              </div>
              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">可灵活组合图文、音视频、表格等内容</div>
              <div class="m-2">各种元素可以独立编辑并随意组合，<br />利用样式库进行排版，就能制作出精美的内容。</div>
              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">一码可上传多个音视频</div>
              <div class="m-2">
                上传音视频个数无限制，可自由组合，<br />
                适用于学生教辅、多媒体图书、景区讲解等多种场景。
              </div>
              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">可灵活组合图文、视频、表格等内容</div>
              <div class="m-2">自由选择多种组件，轻松修改内容排版，更改配色等，让内容展示更美观</div>
              <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">关联表单，替代纸质表格管理工作任务</div>
              <div class="m-2">
                可用于出入登记、签到、报名等场景，快速收集数据，也适用于设备巡检、维保、区域巡查等应用，搭建业务系统。
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/av/%E5%9B%BE%E7%89%87%206%401x.png"
                  style="width: 228px; height: auto; margin: 0 auto"
                />
              </el-col>
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/av/%E5%9B%BE%E7%89%87%207%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
            </el-row>
            <el-row style="margin-top: 20px">
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/av/%E5%9B%BE%E7%89%87%208%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
              <el-col :span="12">
                <img
                  src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/av/%E5%9B%BE%E7%89%87%209%401x.png"
                  style="width: 228px; height: 333px; margin: 0 auto"
                />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="background-color: rgb(255 255 255 / 100%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          根据业务需求，自由组合内容和功能，创建专属二维码
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          快速搭建二维码应用，解决你的各类问题
        </div>
        <div>
          <el-row class="mt-10">
            <el-col :span="8">
              <div
                style="
                  width: 281px;
                  height: 188px;
                  padding: 20px;
                  margin: 0 auto;
                  background-color: rgb(255 255 255 / 100%);
                  border-radius: 6px;
                  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
                "
              >
                <div style="font-size: 20px; font-weight: 800; color: rgb(86 85 85 / 100%); text-align: center">
                  教育培训
                </div>
                <div style="margin-top: 20px; font-size: 18px; color: rgb(86 85 85 / 100%); text-align: left">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 学生扫码查看教学资料，课程视频，播放英语听力。
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                style="
                  width: 281px;
                  height: 188px;
                  padding: 20px;
                  margin: 0 auto;
                  background-color: rgb(255 255 255 / 100%);
                  border-radius: 6px;
                  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
                "
              >
                <div style="font-size: 20px; font-weight: 800; color: rgb(86 85 85 / 100%); text-align: center">
                  产品说明
                </div>
                <div style="margin-top: 20px; font-size: 18px; color: rgb(86 85 85 / 100%); text-align: left">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消费者扫码了解产品详情，使用安装视频等。
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div
                style="
                  width: 281px;
                  height: 188px;
                  padding: 20px;
                  margin: 0 auto;
                  background-color: rgb(255 255 255 / 100%);
                  border-radius: 6px;
                  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 40%);
                "
              >
                <div style="font-size: 20px; font-weight: 800; color: rgb(86 85 85 / 100%); text-align: center">
                  旅游景点介绍
                </div>
                <div style="margin-top: 20px; font-size: 18px; color: rgb(86 85 85 / 100%); text-align: left">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;游客扫码获取景区景点介绍，播放相关音视频。
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div style="background-color: rgb(239 239 239 / 40%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          常见问题
        </div>

        <el-row class="mt-10">
          <el-col :span="12">
            <div class="m-2" style="font-size: 20px; font-weight: 600">可以上传哪些视频格式？</div>
            <div class="m-2">
              视频：mp4, flv, avi, mov <br />
              音频：m4a, mp3, wav, ogg, asf, au, voc, aiff, rm, m4a, svcd,vcd
            </div>
            <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">音视频播放有没有限制？</div>
            <div class="m-2">免费用户的音视频限前5人播放试用，音视频保留30天；付费后播放人数不限，长期有效。</div>
            <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">流量用完后，音视频播放会受什么影响？</div>
            <div class="m-2">高清流量用完后，音视频仍然可以播放，但音频将转为低音质、视频将转为流畅模式播放。</div>
          </el-col>
          <el-col :span="12">
            <div class="m-2" style="font-size: 20px; font-weight: 600">上传视频有大小限制吗？</div>
            <div class="m-2">所有版本均无视频文件大小、时长限制，也没有一个二维码中可上传音视频数量的限制。</div>
            <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">什么是视频高清播放流量？</div>
            <div class="m-2">
              播放二维码中的音视频时会消耗流量。播放1次消耗1次流量，每次完整播放1个视频所消耗的流量大小等于视频大小。
            </div>
            <div class="m-2 mt-8" style="font-size: 20px; font-weight: 600">
              付费版本到期后，音视频播放会受什么影响？
            </div>
            <div class="m-2">
              付费期内制作的二维码，到期后播放次数仍然不限制，若流量有剩余，仍可以高音质/清晰度播放；若流量已经用完，将转为低音质、流畅模式播放。
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div style="background-color: rgb(255 255 255 / 100%)" class="p-10 c my-10">
      <div class="content">
        <div
          class="text-center"
          style="font-size: 30px; font-weight: 800; line-height: 42px; color: rgb(16 16 16 / 100%)"
        >
          免费即可使用，通过更多应用案例快速创建
        </div>
        <div class="text-center mt-4" style="font-size: 18px; color: rgb(86 85 85 / 100%)">
          我们整理了用户的真实使用案例，并做成了模板，你可以修改内容，快速创建你的二维码
        </div>
        <div class="text-center mt-10">
          <a href="/v3">
            <el-button
              class="mt-10"
              color="#333333"
              size="large"
              style="width: 140px; height: 50px; margin: 0 auto; font-size: 16px"
              >立即使用</el-button
            >
          </a>
        </div>
      </div>
    </div>
    <efoot></efoot>
  </div>
</template>

<script setup>
import uploads from '@/views/components/index/upload.vue';
import ehead from '@/views/components/index/head.vue';
import efoot from '@/views/components/index/foot.vue';
onMounted(() => {});
</script>
<style scoped lang="less">
.content {
  width: 1200px;
  margin: 0 auto;
}
.c {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 60px 20px;
  min-width: 1200px;
}
</style>

